<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>简易购物车</title>
</head>

<body>
  <script src="vue3.js"></script>
  <!-- 实战：简易购物车 -->
  <div id="app" align="center">
    <div>
      <!-- 商品添加 -->
      <p>商品编号：<input type="text" v-model="id"></p>
      <p>商品名称：<input type="text" v-model="name"></p>
      <p>商品单价：<input type="text" v-model="price"></p>
      <p>商品数量：<input type="text" v-model="num"></p>
      <button @click="addGood">添加商品</button>
    </div>
    <hr>
    <div>
      <!-- 商品搜索 -->
      请输入关键字：<input type="text" v-model="keyword">
      <button @click="searchGoods">搜索商品</button>
    </div>
    <hr>
    <div v-if="goods.length!=0">
      <!-- 购物车 -->
      <table border="1">
        <tr>
          <th>编号</th>
          <th>
            全选 <input type="checkbox" v-model="isAll" @change="selectAll">
            商品名称
          </th>
          <th>商品单价</th>
          <th>商品数量</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item,index) in goods" :class="{mybgcolor:(index+1)%2==0}">
          <td>{{item.id}}</td>
          <td>
            <input type="checkbox" v-model="cklist" v-bind:value="item" @change="itemChange">
            {{item.name}}
          </td>
          <td>{{item.price}}</td>
          <td>
            <button @click="item.num--" v-bind:disabled="item.num==1">-</button>
            {{item.num}}
            <button v-on:click="item.num++">+</button>
          </td>
          <td><button @click="deleteGood(index)">移除</button></td>
        </tr>
      </table>
      <div>
        购物车商品总价：￥{{totalPrice}}元
      </div>
    </div>
    <div v-else>
      购物车为空
    </div>
  </div>
  <script>
    const comApp = Vue.createApp({
      data() {
        return {
          goods: [
            {
              id: 1,
              name: "华为手机",
              price: 3688,
              num: 1
            },
            {
              id: 2,
              name: "苹果手机",
              price: 5688,
              num: 1
            },
            // 小米手机
            {
              id: 3,
              name: "小米手机",
              price: 1688,
              num: 1
            }
          ],
          // 绑定到商品添加的控件
          id: "",
          name: "",
          price: "",
          num: "",
          keyword: "", // 搜索关键字,
          isAll: false, // 是否全选
          cklist: [] // 选中的商品
        }
      },
      computed: { // 定义计算属性来计算总价
        totalPrice() {
          var total = 0; // 总价
          // 遍历goods
          this.goods.forEach((item) => {
            total += item.price * item.num; // 累加
          });
          // 返回总价
          return total;
        }
      },
      methods: {
        // 根据索引删除当前商品
        deleteGood(index) { // 形参index表示索引
          this.goods.splice(index, 1);
        },
        // 添加商品，新添加的商品必须是对象，且对象的属性必须与goods一致
        addGood() {
          this.goods.push({
            id: this.id,
            name: this.name,
            price: this.price,
            num: this.num
          });
        },
        // 搜索商品
        searchGoods() {
          var newArr = []; // 保存搜索结果
          // 遍历goods
          this.goods.forEach((item) => {
            // 判断是否找到
            if (item.name.indexOf(this.keyword)!= -1) {
              // 将找到的数据对象添加到newArr
              newArr.push(item);
            }
          });
          // 将搜索的结果赋值给goods
          this.goods = newArr.slice();
        },
        // 商品全选,若全选，则将goods的数据装入cklist，否则清空cklist
        selectAll() {
          if (this.isAll) {
            // slice()获取数组的所有元素并返回新的数组
            this.cklist = this.goods.slice();
          } else {
            this.cklist = [];
          }
        },
        // 反向控制全选，若cklist长度与goods一致就全选状态，否则取消全选
        itemChange() {
          if (this.cklist.length == this.goods.length) {
            this.isAll = true;
          } else {
            this.isAll = false;
          }
        }
      }
    }).mount("#app");
  </script>
</body>

</html>